<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DeepSeek AI Chat</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f8f9fa;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .chat-container {
            max-width: 800px;
            margin: 2rem auto;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            background-color: white;
            overflow: hidden;
        }
        .chat-header {
            background: linear-gradient(135deg, #6e8efb, #a777e3);
            color: white;
            padding: 1.5rem;
            text-align: center;
        }
        .chat-messages {
            height: 400px;
            overflow-y: auto;
            padding: 1.5rem;
            background-color: #f8f9fa;
        }
        .message {
            margin-bottom: 1rem;
            padding: 1rem;
            border-radius: 10px;
            max-width: 80%;
        }
        .user-message {
            background-color: #e9ecef;
            margin-left: auto;
            border-bottom-right-radius: 0;
        }
        .ai-message {
            background-color: #d8e8fd;
            margin-right: auto;
            border-bottom-left-radius: 0;
        }
        .chat-input {
            padding: 1.5rem;
            border-top: 1px solid #dee2e6;
        }
        .loading {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid rgba(0, 0, 0, 0.1);
            border-radius: 50%;
            border-top-color: #6e8efb;
            animation: spin 1s ease-in-out infinite;
            margin-left: 10px;
        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        .settings-panel {
            padding: 1rem;
            background-color: #f1f3f5;
            border-top: 1px solid #dee2e6;
        }
        .model-badge {
            background: linear-gradient(135deg, #6e8efb, #a777e3);
            color: white;
            font-size: 0.8rem;
            padding: 0.2rem 0.5rem;
            border-radius: 10px;
            margin-right: 0.5rem;
        }
        pre {
            white-space: pre-wrap;
            word-wrap: break-word;
            background-color: #f1f3f5;
            padding: 0.5rem;
            border-radius: 5px;
            margin: 0.5rem 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="chat-container">
            <div class="chat-header">
                <h1 class="h4 mb-0">DeepSeek AI Chat</h1>
            </div>
            
            <div class="chat-messages" id="chatMessages">
                <div class="message ai-message">
                    <span class="model-badge">DeepSeek AI</span>
                    Hello! I'm DeepSeek AI. How can I help you today?
                </div>
            </div>
            
            <div class="settings-panel collapse" id="settingsPanel">
                <div class="row g-3">
                    <div class="col-md-4">
                        <label for="modelSelect" class="form-label">Model</label>
                        <select class="form-select" id="modelSelect">
                            <option value="deepseek-chat" selected>deepseek-chat</option>
                            <option value="deepseek-coder">deepseek-coder</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label for="temperatureRange" class="form-label">Temperature: <span id="tempValue">0.7</span></label>
                        <input type="range" class="form-range" min="0" max="1" step="0.1" value="0.7" id="temperatureRange">
                    </div>
                    <div class="col-md-4">
                        <label for="maxTokens" class="form-label">Max Tokens</label>
                        <input type="number" class="form-control" id="maxTokens" value="1000" min="1" max="4000">
                    </div>
                </div>
            </div>
            
            <div class="chat-input">
                <form id="chatForm">
                    <div class="input-group mb-3">
                        <button class="btn btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#settingsPanel">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-gear" viewBox="0 0 16 16">
                                <path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z"/>
                                <path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z"/>
                            </svg>
                        </button>
                        <textarea class="form-control" id="userInput" rows="1" placeholder="Type your message here..."></textarea>
                        <button class="btn btn-primary" type="submit" id="sendButton">
                            Send
                            <div class="loading d-none" id="loadingSpinner"></div>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const chatForm = document.getElementById('chatForm');
            const userInput = document.getElementById('userInput');
            const chatMessages = document.getElementById('chatMessages');
            const loadingSpinner = document.getElementById('loadingSpinner');
            const temperatureRange = document.getElementById('temperatureRange');
            const tempValue = document.getElementById('tempValue');
            const modelSelect = document.getElementById('modelSelect');
            const maxTokens = document.getElementById('maxTokens');
            
            // Update temperature value display
            temperatureRange.addEventListener('input', function() {
                tempValue.textContent = this.value;
            });
            
            // Auto-resize textarea
            userInput.addEventListener('input', function() {
                this.style.height = 'auto';
                this.style.height = (this.scrollHeight) + 'px';
            });
            
            // Handle form submission
            chatForm.addEventListener('submit', async function(e) {
                e.preventDefault();
                
                const prompt = userInput.value.trim();
                if (!prompt) return;
                
                // Add user message to chat
                addMessage(prompt, 'user');
                
                // Clear input
                userInput.value = '';
                userInput.style.height = 'auto';
                
                // Show loading spinner
                loadingSpinner.classList.remove('d-none');
                document.getElementById('sendButton').disabled = true;
                
                try {
                    // Get settings
                    const model = modelSelect.value;
                    const temperature = temperatureRange.value;
                    const maxTokensValue = maxTokens.value;
                    
                    // Call API
                    const response = await fetch('/api/generate', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                            prompt: prompt,
                            model: model,
                            temperature: temperature,
                            max_tokens: maxTokensValue
                        })
                    });
                    
                    const data = await response.json();
                    
                    if (response.ok) {
                        // Add AI response to chat
                        if (data.choices && data.choices.length > 0) {
                            const aiResponse = data.choices[0].message.content;
                            addMessage(aiResponse, 'ai');
                        } else {
                            addMessage('Sorry, I received an empty response. Please try again.', 'ai');
                        }
                    } else {
                        // Handle error
                        addMessage(`Error: ${data.error || 'Failed to get response'}`, 'ai');
                        console.error('API Error:', data);
                    }
                } catch (error) {
                    console.error('Error:', error);
                    addMessage('Sorry, there was an error processing your request.', 'ai');
                } finally {
                    // Hide loading spinner
                    loadingSpinner.classList.add('d-none');
                    document.getElementById('sendButton').disabled = false;
                }
            });
            
            // Function to add a message to the chat
            function addMessage(content, sender) {
                const messageDiv = document.createElement('div');
                messageDiv.className = `message ${sender}-message`;
                
                // Add model badge for AI messages
                if (sender === 'ai') {
                    const badge = document.createElement('span');
                    badge.className = 'model-badge';
                    badge.textContent = 'DeepSeek AI';
                    messageDiv.appendChild(badge);
                }
                
                // Process markdown in AI responses
                if (sender === 'ai') {
                    // Process code blocks and other markdown
                    const formattedContent = marked.parse(content);
                    messageDiv.innerHTML += formattedContent;
                } else {
                    // For user messages, just use the text
                    messageDiv.innerHTML += content;
                }
                
                chatMessages.appendChild(messageDiv);
                
                // Scroll to bottom
                chatMessages.scrollTop = chatMessages.scrollHeight;
            }
        });
    </script>
</body>
</html> 